<template>
  <div>
    <common-header>
      <template v-slot:title>
        我的订单
      </template>
      <template v-slot:extra>
        <shopping-cart-badge></shopping-cart-badge>
      </template>
    </common-header>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部订单" name="all">
            <all-order></all-order>
          </el-tab-pane>
          <el-tab-pane label="待付款" name="noPay">
            <no-pay></no-pay>
          </el-tab-pane>
          <el-tab-pane label="待评价" name="noComment">
            <no-comment></no-comment>
          </el-tab-pane>
          <el-tab-pane label="已完成" name="completed">
            <completed></completed>
          </el-tab-pane>
          <el-tab-pane label="已取消" name="cancled">
            <cancled></cancled>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader";
// import ShoppingCartBadge from "@/components/ShoppingCartBadge";
import AllOrder from "@/components/MyOrder/AllOrder";
import NoPay from "@/components/MyOrder/NoPay";
import NoComment from "@/components/MyOrder/NoComment";
import Completed from "@/components/MyOrder/Completed";
import Cancled from "@/components/MyOrder/Cancled";

export default {
  components: {
    CommonHeader,
    // ShoppingCartBadge,
    AllOrder,
    NoPay,
    NoComment,
    Completed,
    Cancled,
  },
  mounted() {
    // http
    //   .post(`/orders`, {
    //     id: this.userId,
    //     status: this.status,
    //   })
    //   .then((res) => {
    //     window.console.log("我来拿结果了");
    //     window.console.log(res.data.data);
    //   });
  },
  data: () => ({
    activeName: "all",
  }),
  methods: {
    getIdByToken() {},
    handleClick(tab) {
      window.console.log(tab.name);
    },
  },
};
</script>

<style></style>
